<template>
	<div >
		logo
			<el-button :icon="Search" color="rgba(255, 255, 255, 0.1))" :dark="isDark">	搜索
			</el-button>
  <div class="custom-input-container">
    <el-input 
      v-model="input1"
      placeholder="搜索你感兴趣的内容"
	  class="hover-border-input"
    >

<template #append>

        <el-button :icon="Search" color="rgba(255, 255, 255, 0.1))" :dark="isDark">	搜索
	</el-button>
      </template>
	  
	</el-input>
  </div>
  
  </div>
  
  
</template>
<!-- :suffix-icon="Calendar" -->
<script setup >
import { ref } from 'vue'

import { Calendar, Search } from '@element-plus/icons-vue'

const input1 = ref('');
const inputValue = ref('');
</script>

<style  scoped>
	

/* 使用深度选择器覆盖 element plus 默认样式 */
:deep(.hover-border-input) .el-input__wrapper {
/*  background-color: #f5f5f5; */
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1) inset; /* 默认边框 */
   background: rgba(255, 255, 255, 0.1); /* 半透明白色背景 */
}

/* 鼠标悬停状态 */
:deep(.hover-border-input) .el-input__wrapper:hover {
  box-shadow: 0 0 0 1px #fff inset !important; /* 悬停白色边框 */
  /* background-color: rgb(22, 24, 35); */
}
 
/* 聚焦状态保持白色边框 */
/* :deep(.hover-border-input) .el-input__wrapper.is-focus {
  box-shadow: 0 0 0 1px #00ff00 inset !important;
} */

/* 失去聚焦状态边框 */
:deep(.hover-border-input) .el-input__wrapper.is-focus {
  box-shadow: 0 0 0 1px #ffffff inset !important;
}

 

 
 
 
 
 
 
 
/* 可选：添加发光效果 */
.custom-input-container {
	
	
/* 	 display:flex;
	justify-content: center; /* 水平居中 */
/* 	align-items: center;     /* 垂直居中 */
/* 	margin: 0; */ 
	
	  position: fixed;
	  top: 0.5rem;
	  left: 50%;
	  transform: translateX(-50%);
/* 	 max-width: 400px; */
	  	  width: 30rem;
	
	


/*  padding: 2px;
 background: rgba(255, 255, 255, 0.1); 
  border-radius: 6px;
  transition: all 0.3s ease; */
  
  
}
 
.custom-input-container:hover {
  /* background: linear-gradient(145deg, #ffffff); */
  background: rgba(255, 255, 255, 0); /* 半透明白色背景 */
}
</style>